<template>
	<view class="container">
		<view class="order-1">
			<text class="order-text" @click="handleShare">上海市黄埔区996号102市</text>
			<view class="order-text2" @click="handleShare1">
				<text class="order-bottom">李益民 1766855645</text>
				<text class="order-bottom">立即服务</text>
			</view>
			<view class="order-text1">
				<text class="order-bottom">备注</text>
				<text class="order-bottom">请输入</text>
			</view>
		</view>
		<view class="border-2">

			<view class="order-text2">
				<text class="order-body">助医服务 1766855645</text>
				<text class="order-body">￥38/次</text>
			</view>
			<view class="laji">
				<text class="order-text3" @click="textbtn">小计</text>
			</view>
		</view>
		<view class="border-3">
			<view class="bottom-order">
				<image src="../../../static/img/bar.png" mode="" class="order-img"><text class="zhifu">222</text>
				</image>


			</view>
			<view class="bottom-order">
				<image src="../../../static/img/weixin.png" mode="" class="order-img"><text class="zhifu">微信</text>
				</image>


			</view>
			<view class="bottom-order">
				<image src="../../../static/img/zhifubao.png" mode="" class="order-img"><text class="zhifu">支付宝</text>
				</image>

			</view>
			<view class="bottom-order1">
				<button type="default" @click="zhifu" class="btn-order">支付</button>
			</view>
		</view>
		<Share ref="refShare"></Share>
		<Service ref="refShare1"></Service>
	</view>
</template>

<script>
	import Share from '../../../components/share.vue';
	import Service from '../../../components/service.vue'
	export default {
		components: {
			Share,
			Service
		},
		data() {
			return {

			}
		},

		methods: {

			zhifu() {
				uni.showModal({
					title: '支付失败',
					content: '余额不足,请换卡支付',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({ //跳转页面
								// url:"../message/message"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			handleShare() {
				this.$refs.refShare.handleShowShare();
			},

			handleShare1() {
				this.$refs.refShare1.handleShowShare();
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		align-items: center;
	}

	.order-1 {
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 10px #e8e8e8;
		width: 94%;
		border-radius: 8px;
	}

	.order-text {
		width: 100%;
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid #007AFF;
	}

	.order-bottom {

		height: 60px;
		line-height: 60px;

	}

	.order-text1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.order-text2 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1px solid #007AFF;
	}

	.border-2 {
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 10px #e8e8e8;
		width: 94%;
		border-radius: 8px;
	}

	.border-3 {
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 10px #e8e8e8;
		width: 94%;
		border-radius: 8px;
	}

	.order-body {
		height: 90px;
		line-height: 90px;
	}

	.laji {
		display: flex;
		flex-direction: row;
		// justify-content: flex-end;
		// align-items: center;

	}

	.order-text3 {
		width: 100%;
		height: 60px;
		line-height: 60px;
	}

	.bottom-order {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		& .zhifu {
			width: 100%;
			height: 60px;
			line-height: 60px;
		}
	}

	.bottom-order1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 10px;
		margin-bottom: 10px;

		& .btn-order {
			width: 94%;
			height: 50px;
			line-height: 50px;
			background-color: #007AFF;
		}
	}

	.order-img {
		width: 55px;
		height: 45px;
		margin-top: 10px;
		border-radius: 50px;
	}
</style>
